<template>
  <div>
    <a-row class="pading-top150">
      <a-col :span="4"></a-col>
      <a-col :span="7">
        <div class="pading-top50">
          <div class="title">追求易用   拒绝代码搬运工</div>
          <p class="content">HJ轻型快速框架产品提供高效的开发体验、与众不同视图代码生成、最细粒度的权限管控。快速迭代行业化应用，是研发团队理想的选择。</p>
          <div class="btnonlinediv">
            <a-button type="primary" class="btnonline" @click="onlineExperience">在线体验</a-button>
          </div>
        </div>
      </a-col>

      <a-col :span="2"></a-col>
      <a-col :span="6">
        <img src="../../assets/home.png" />
      </a-col>
      <a-col :span="5"></a-col>
    </a-row>

    <br />
    <br />
    <a-row>
      <a-col :span="4"></a-col>
      <a-col :span="4">
        <div class="text-center">
          <a-button type="link" class="title-head">权限管理</a-button>
          <p class="title-body0">安全的数据权限管理功能</p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="text-center">
          <a-button type="link" class="title-head">代码生成</a-button>
          <p class="title-body0">与众不同的代码生成设计</p>
        </div>
      </a-col>

      <a-col :span="4">
        <div class="text-center">
          <a-button type="link" class="title-head">工作流程</a-button>
          <p class="title-body0">可扩展的工作流开发</p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="text-center">
          <a-button type="link" class="title-head">图文识别</a-button>
          <p class="title-body0">整合专业的图文识别技术</p>
        </div>
      </a-col>
      <a-col :span="4"></a-col>
    </a-row>

    <br />
    <br />
    <a-row>
      <a-col :span="6"></a-col>
      <a-col :span="12">
        <div class="home-attach-title">高效、省时、省力、省心</div>
      </a-col>
      <a-col :span="6"></a-col>
    </a-row>
    <a-row>
      <a-col :span="3"></a-col>
      <a-col :span="18">
        <p
          class="home-attach-desc"
        >HJ产品页面简单清爽，功能设置一目了然，并且将敏捷开发的理念融合到产品当中，做到了真正的高效、省时、省力、省心。 HJ是开发者理想选择。</p>
      </a-col>
      <a-col :span="3"></a-col>
    </a-row>
    <div class="home-attach-title"></div>
    <a-row>
      <a-col :span="4"></a-col>
      <a-col :span="4">
        <div class="text-center">
          <img class="img-top" src="../../assets/free.png" />
          <p class="title-body">高效的代码生成，释放无技术含量工作</p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="text-center">
          <img class="img-top" src="../../assets/save-time.png" />
          <p class="title-body">去掉重复工作，大大减轻工作量</p>
        </div>
      </a-col>

      <a-col :span="4">
        <div class="text-center">
          <img class="img-top" src="../../assets/save-effort.png" />
          <p class="title-body">提高开发者工作重心，只关注核心逻辑</p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="text-center">
          <img class="img-top" src="../../assets/save-worry.png" />
          <p class="title-body">快速搭建原型，及时沟通与交付</p>
        </div>
      </a-col>
      <a-col :span="4"></a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boffset: [-125, 0]
    }
  },
  methods:{
    onlineExperience(){
      var url = window._CONFIG['localURL'] + '/user/login'
      window.open(url)
    }
  }
}
</script>

<style >
.text-center {
  text-align: center;
}
.title-head {
  font-size: 28px;
  font-weight: 200;
}
.title-body0 {
  padding-top: 30px;
  color: #666666;
  font-size: 22px;
  font-weight: 200;
}
.title-body {
  padding-top: 30px;
  color: #666666;
  font-size: 14px;
  font-weight: 400;
}
.img-top {
  height: 160px;
  width: 130px;
}
.pading-top150 {
  padding-top: 150px;
}
.pading-top50 {
  padding-top: 50px;
  margin-top: 50px;
}

.title {
  font-size: 2.5em;
  font-weight: 300;
}
.content {
  width: 36vw;
  height: 10vw;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0px;
  color: #666666;
  position: absolute;
  top: 25vh;
  margin-top: 10px;
}
.btnonlinediv {
  text-align: center;
}
.btnonline {
  top: 20vh;
  margin-top: 10px;
  width: 300px;
  height: 60px;
  font-size: 18px;
}
.home-attach-title {
  text-align: center;
  height: 36px;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 3.6px;
  color: #434343;
  padding: 70px 0 100px 0;
}
.home-attach-desc {
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 0px;
  color: #666666;
  text-align: center;
  margin: 0 auto;
}
</style>